<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/css/myioc/iconfont.css" />
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/vue.js" type="text/javascript"></script>
    <script src="/js/axios.js" type="text/javascript"></script>
    <script src="/js/index.js"></script>
</head>
<style>
    .iconfont{
        font-size:20px
    }
    *{
        margin:0;
        padding:0;
    }
    .blogs_body{
        width: 90%;
        height:1000px;
        margin: 30px auto;
    }
    a{
        text-decoration:none;
    }
    .el-menu--horizontal>.el-menu-item.is-active{
        border-bottom:none;
        color: #303133;
    }

    .goFullText:hover{
        color:#fc5531!important
    }

    li{
        list-style-type:none;
        border-radius: 10px;
    }
    .li_type:hover{
        background:#f0f0f5;
    }
</style>
<body style="background-color:#f5f6f7">
<div id="app">
    <div th:include="common/common-nav::head" style="background-color: white;"></div>

    <div class="blogs_body" style="display: flex;flex-direction:row;">

        <div style="width:16%;background-color: white;border-radius: 10px">

            <div style="width: 90%;margin: 10px auto">
                <ul style="height: 90%">
                    <li v-for="(item,idx) in types" class="li_type" >
                        <p style="padding: 20px" @click="getTypePage(item)">{{item.type}}({{item.num}})</p>
                    </li>
                </ul>
            </div>

        </div>

        <div style="width: 82%;margin-left:2%;background-color: white;border-radius: 10px">
            <div style="width: 96%;margin: 30px auto">
                <div style="height:30px;"><h2><b>{{titleText2}}技术区随笔</b></h2></div>

                <div style="margin:20px 0;display: flex;justify-content:space-between">
                    <div style="width:90%">&nbsp;</div>
                    <h4>
                        <a href="javascript:;" @click="ifTitle(this)"><b style="color: black">{{titleText}}</b></a>
                    </h4>
                </div>
                <hr style="border: 0; background-color: #ededed; height: 1px;margin-bottom: 20px">

                <div v-for="(item,idx) in blogs" style="margin:20px auto;width: 96%;border-bottom: 1px solid #ededed">
                    <div style="height:30px">
                        <h3>
                            <a class="goFullText" href="/api/public/goFullText" @click="goFullText(item.blog.id)"
                               style="color: black"><b>{{item.blog.title}}</b>
                            </a>
                        </h3>
                    </div>
                    <div style="margin:20px 0;">
                        <h4 v-if="title==true" style="text-indent:2em;color:#999aaa">{{item.blog.digest}}</h4>

                        <div style="width:100%;display: flex;justify-content:space-between;margin-top:20px">

                            <div style="display: flex;justify-content:space-between;color:#999aaa;width:15%">
                                <div>
                                    <i class="el-icon-view" style="font-size:20px"></i>
                                    <span>{{item.blog.readCount}}</span>
                                </div>
                                <div>
                                    <i class="iconfont myiocndianzan"></i>
                                    <span>0</span>
                                </div>
                                <div>
                                    <i class="iconfont myiocnpinglun "></i>
                                    <span>0</span>
                                </div>
                            </div>

                            <div style="display: flex;justify-content:space-between;color:#999aaa;width:20%">
                                <div>
                                    <span>{{item.user.nickname}}</span>
                                </div>
                                <div>
                                    <span>{{item.blog.postedTime}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div style="margin-top: 10px">
                    <el-pagination background :page-size="3" layout="prev, pager, next"
                                   @current-change="pageChange" :total="total"
                                   :current-page.sync="currentPage">
                    </el-pagination>
                </div>
            </div>
        </div>

    </div>

</div>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                blogs:[],
                titleText2:"首页",
                title:true,
                titleText:"仅列出标题",
                types:[],
                searchTitle:"",
                start:0,
                total:0,
                currentPage:1
            }
        },
        methods:{
            getTypePage(obj){
                this.titleText2 = obj.type
                this.currentPage=1
                this.start = 0
                let that = this
                axios.get("/api/public/findPageType/"+that.start+"/"+obj.id).then(
                    function (resp){
                        that.blogs = resp.data.data.blogs
                        that.total = resp.data.data.total
                    }
                )
            },

            pageChange(val){
                this.start = val-1
                this.axiosPost(val-1, this.searchTitle)
            },

            findByTitle(){
                let that = this
                if(this.searchTitle==null || this.searchTitle == ""){
                    this.$notify({
                        title: '搜索不能为空',
                        type: 'warning'
                    });
                    return
                }
                this.start = 0
                this.currentPage = 1
                this.axiosPost(this.start, this.searchTitle)
            },

            axiosPost(start,title){
                let obj = {start:start,title:title}
                let that = this
                axios({
                    method:'post',
                    url:'/api/public/findPage',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                    },
                    params:obj
                }).then(function (resp) {
                    that.blogs =  resp.data.data.blogs
                    that.total = resp.data.data.total
                    console.log( resp.data.data.total)
                })
            },

            goFullText(id){
                sessionStorage.setItem("blogId",id);
                localStorage.setItem("start",this.start)
                localStorage.setItem("searchTitle",this.searchTitle)
                axios.get("/api/public/addReadCount/" + id).then(function (resp){})
            },

            ifTitle(){
                if(this.title == true){
                    this.title = false
                    this.titleText = "列出摘要"
                    return
                }else{
                    this.title = true
                    this.titleText = "仅列出标题"
                }
            },

            myInit(){
                let msg = sessionStorage.getItem("msg")
                if(msg != null){
                    this.$notify({
                        title: msg,
                        type: 'success',
                        offset: 100
                    });
                    sessionStorage.clear()
                }
                let start = localStorage.getItem("start")
                let searchTitle = localStorage.getItem("searchTitle")

                if(start>0 && (searchTitle!=null || searchTitle !="")){
                    this.start = start
                    this.searchTitle = searchTitle
                    this.currentPage = parseInt(start) +1
                    localStorage.clear()
                }

                let that = this
                let obj = {start:this.start,title:this.searchTitle}
                console.log(obj)
                axios.get("/api/public/findPage",{params:obj}).then(
                    function (resp){
                        that.blogs =  resp.data.data.blogs
                        that.total = resp.data.data.total
                        console.log(resp.data.data)
                    }
                )

                axios.get("/api/public/getTypeAll").then(
                    function (resp) {
                        that.types = resp.data.data
                        console.log(resp.data.data)
                    }
                )
            }

        },
        mounted(){
            this.myInit()
            this.titleText2 = "首页"
            let search = sessionStorage.getItem("searchTitle")
            if(search != null){
                this.searchTitle = search
                this.findByTitle()
                sessionStorage.clear()
            }
        }
    })
</script>
</html>